<template>
   <div>
        <el-card>
          <el-row :gutter="20">
           
          <el-col :span="8">
          <el-button  type='primary' @click="addDisplay">添加</el-button>
          </el-col>
          <el-col :span="16">
          <el-input>
           <template #append>
          <el-button :icon="Search" />
          </template>
           </el-input>
          </el-col>
          
          </el-row>          
        </el-card>
                    <!-- table -->
                      <Table
                        :tableData="tableData"
                        :tableLabel="tableLabel"
                        :showIndex="true"
                        :select="true"
                        :total='total'
                        :currentPage='queryinfo.pagenum'
                        :pageSize='queryinfo.pagesize'
                        @handleSizeChange='handleSizeChange'
                        @handleCurrentChange='handleCurrentChange'
                        @rowOperation='rowOperation'
                        :multipleSelection='multipleSelection'
                        @change='change'
                        @handleSelectionChange='handleSelectionChange'
                      >
                      
                      </Table>
 

              <!-- 编辑对话框 -->
                <Dialog 
                :dialogVisible='edit.editdialogVisible'
                :title='edit.title'
                :searchForm='searchForm'
                :searchData='rowData' 
                :rules="rules"
                @cancel='cancel'
                @validateTrue='EditvalidateTrue'
                @validateFalse='EditvalidateFalse'

                 
                    >
                </Dialog>
                <!-- 添加对话框 -->
              <Dialog
              :dialogVisible='add.adddialogVisible'
              :title='add.title'
              :searchForm='addFormItem'
              :rules="rules"
              :searchData='addForm' 
              @cancel='cancel'
              @validateTrue='AddvalidateTrue'
              @validateFalse='AddvalidateFalse'
              >
              </Dialog>
              <!-- 权限 -->
           <Dialog 
           :dialogVisible='share. sharedialogVisible'
           :title='share.title'
           :searchForm='shareForm'
           :searchData='shareForm' 
           >
           
           </Dialog>

              </div>
             
             

</template>

<script lang='ts' setup>
import { Users,State,Edituser,addUsers,Deleteuser } from "../api/api";
import { reactive, ref } from "vue";
import { Search } from '@element-plus/icons-vue'
import Table from '../components/commen/Table.vue'

import Dialog from '../components/commen/Dalog.vue'

import { ElMessage,ElMessageBox } from 'element-plus'

const queryinfo = reactive({
  query: "",
  pagenum: 1,
  pagesize: 2,
});
const multipleSelection = ref([])
const showIndex = ref(true);
const select = ref(true);
let tableData = ref([]);
const edit = reactive({
  editdialogVisible:false,
  title:'编辑用户',
 
})
const share =reactive({
   sharedialogVisible:false,
   title:'分配权限',
  
})
              
const rules = reactive({
 
        role_name: [
          { required: true, message: "请选择角色", trigger: "blur" }
        ],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" }
        ],
       mobile: [{ required: true, message: "请输入电话", trigger: "blur" }],
        enable_password: [
          { required: true, message: "请输入邮箱", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请选择管理协议", trigger: "blur" }
        ],
        // port: [{ required: true, message: "请输入管理端口", trigger: "blur" }]
      
})
const searchForm = reactive([
  
      
        {
          type: "Select",
          label: "角色名",
          prop: "role_name",
          width: "120px",
          props:[{
            label:'超级管理员',
            value:'1',
          },
          {
            label:'管理员',
            value:'2',
          },
          {
            label:'测试人员',
            value:'3',
          }
          ],
          isFormItemShow: false
        },
        {
          type: "Input",
          label: "用户名",
          prop: "username",
          width: "120px",
          isFormItemShow: true,
          disabled:true
        },
        {
          type: "Input",
          label: "电话",
          prop: "mobile",
          width: "120px",
          isFormItemShow: true
        },
        {
          type: "Input",
          label: "邮件",
          prop: "email",
          width: "120px",
          isFormItemShow: true
        },
        
     

])
const shareForm=reactive([
{
          type: "Select",
          label: "角色名",
          prop: "role_name",
          width: "120px",
          props:[{
            label:'超级管理员',
            value:'1',
          },
          {
            label:'管理员',
            value:'2',
          },
          {
            label:'测试人员',
            value:'3',
          }
          ],
           isFormItemShow: true
          
          }
          

])

let total=ref()
// 获取列表
const getUser = async () => {
  const res = await Users(queryinfo);
  console.log(res);
  tableData.value = res.data.data.users;
  total.value=res.data.data.total
  console.log(tableData.value);
};
const handleSizeChange = (val) => {
     queryinfo.pagesize=val
     console.log('父子间',val)
     getUser()
}
const handleCurrentChange = (val) => {
    queryinfo.pagenum=val
     console.log('父子间',val)
    getUser()
}
const rowData=ref([])
// 操作
const rowOperation= (row,index,now) => {
console.log('父组件',index,row,now) 
if(now==='edit'){
  edit.editdialogVisible=true
  console.log('编辑窗口',edit.editdialogVisible)
  rowData.value=row
  
}else if(now==='delete'){
  // console.log('delete=====')
   ElMessageBox.confirm(
    '是否要删除',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
     const res= await Deleteuser(row.id)
     console.log(res)

     getUser()
     if(res.data.meta.status===200){
     ElMessage.success('删除成功 !')
  }else{
     ElMessage.error('删除失败 !')
  }
     
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}
else if(now==='share'){
 share.sharedialogVisible=true
}
}


// 表单验证通过
const EditvalidateTrue=async(val) =>{
// ElMessage.success('login successfully !')
console.log('val','父组件表单验证通过') 
const res= await Edituser(val.id,
{email:val.email,mobile:val.mobile})
console.log(res)
getUser()
if(res.data.meta.status===200){
  ElMessage.success('编辑成功 !')
}
}
// 编辑完成
// 开始添加
const addDisplay=()=>{
  console.log('addDisplay')
  add.adddialogVisible=true
}
const add = reactive({
  adddialogVisible:false,
  title:'添加用户',
  
})
const addForm=reactive({
  username:'',
  password:'',
  mobile:'',
  email:''
})
const  AddvalidateTrue = async()=>{
  console.log('add pass')
  const res =await addUsers(addForm)

  console.log(res)

  getUser()
  if(res.data.meta.status===200){
  ElMessage.success('添加成功 !')
}else{ElMessage.error('添加失败 !')}

}

const addFormItem=reactive([
   {
          type: "Input",
          label: "用户名",
          prop: "username",
          width: "120px",
          isFormItemShow: true,
          
        },
        {
          type: "Input",
          label: "密码",
          prop: "password",
          width: "120px",
          isFormItemShow: true
        },
        {
          type: "Input",
          label: "电话",
          prop: "mobile",
          width: "120px",
          isFormItemShow: true
        },
        {
          type: "Input",
          label: "邮件",
          prop: "email",
          width: "120px",
          isFormItemShow: true
        },
])

// 保单验证false
const EditvalidateFalse= ()=>{
  ElMessage.error('请填写表单 !')
}
// 调用编辑接口

// 复选框
const handleSelectionChange = (val) => {
edit.editdialogVisible=false

console.log('父',val)
}
// 改变switch状态
const change = async(row) => {
  console.log('父组件',row)
    const res= await State(row.id, row.mg_state)
    console.log(res)
     if (res.data.meta.status !== 200)
        return ElMessage.error("状态设置失败");
     ElMessage.success("状态设置成功");
}
// 取消
const cancel=(val)=>{
  edit.editdialogVisible=val
  add.adddialogVisible=val
  console.log('父组件',edit.editdialogVisible)
}
const tableLabel = reactive([
  { prop: "username", label: "用户名" },
  { prop: "role_name", label: "角色" },
  { prop: "mobile", label: "电话" },

  { prop: "email", label: "邮箱" },
  {
    prop: "mg_state",
    label: "状态",
    type: "function",
    callback: (row: any) => {
      return "123";
    },
  },
  { label: "操作",type:'opt',
  operation:[{label:'编辑',icon:'Edit',type:'primary',methed:'edit'},
  {label:'删除',icon:'Delete',type:'danger',methed:'delete'},
  {label:'分配权限',icon:'Search',type:'warning',methed:'share'},
  ] },
]);
getUser();
</script>

<style lang="scss" scoped>
.el-card{
  margin: 20px 0;
}
input{
  width: 300px;
}
</style>